Revision:
Accessibility is a must-have feature for any website, what means that websites should be accessible to all, especially to differently-abled people.
Accessibility is not something that should be bolted on later to tick a checkbox. It's vital that the internet and use of websites are accessible to everyone to provide equal opportunities for all.
In order to improve the accessibility of a website, the following should be done:
"Skip navigation" or "skip to content" links provide a way for screen readers and keyboard users to quickly jump over site navigation to the main content. The skip link is a simple hyperlink and it should be the first element on the page. It is usually invisible until the user has focused on it. When the link is triggered, the browser will take the user to the main content area.
code:
<a class="skip-to-content-link" href="#main">Skip to content</a>
<style>
.skip-to-content-link {background: #e77e23; height: 3vw; left: 50%; padding: 8px; position: absolute; transform: translateY(-100%); transition: transform 0.3s;}
.skip-to-content-link:focus {transform: translateY(0%);}
</style>
Adding focus styles to hyperlinks and form inputs helps users that rely on keyboard navigation to browse your website. To test your site focus styles, load up your website, and hit the TAB key on your keyboard. By default, when you use your keyboard to navigate to a link, the browser displays an outline around it. This is the browser's way of letting the user know that they have reached a link and that it's clickable.
code:
<div class="wrap">
<p>Clicking does not highlight the button. Pressing tab on your keyboard will.</p>
<p>Click/tap into the demo area for this to work</p>
<button class="button" type="button">
<span class="button_inner" tabindex="-1">Click away!</span>
</button>
</div>
<style>
.wrap {padding: 2rem;}
.button {outline: 0;border: 0; margin: 0; padding: 0; cursor: pointer;}
.button_inner {font-weight: 400; border: 2px solid #007bff; padding: .5rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem; color: #fff; background-color: #007bff;}
.button:focus, .button_inner:focus { outline: none;}
.button:focus > .button_inner { border: 2px solid red;}
</style>
HTML5 introduced semantic markers that designate sections of the page as header, navigation, main content, and footer. This task is one to raise with a developer, as they can add these landmarks to the HTML templates. Landmarks do not replace skip links. Screen readers can use landmarks to navigate from section to section. Use <header> for your site header, <main> to contain your main content, <nav> for navigation, and <aside> for any other content that is related to the page (like a sidebar or advert).
Video transcripts are required by W3 (World Wide Web Consortium) for videos with sound and help to provide basic video accessibility. There is no requirement to include timestamps in the transcript.
Captions are a text form of audio information in video and animations. This includes the words that are spoken, who is speaking when it is not evident, and important sounds like music, laughter, and noises. Captions must be synchronized with the visual content to contextualize them.
In order to meet accessibility laws, websites need to use colours that make all content of the site visible and readable and also with an appropriate contrast.
Depending on their type of visual impairment, users may find it easier to use websites in low or high contrast colours.
Best practices:
- ratio: text and interactive elements should have a color contrast ratio of at least 4.5:1.
- color as indicator: color should not be the only indicator for interactive elements. For example, underline links on hover, or mark a required field with an asterisk.
- color blindness: red/green color blindness is the most common, so avoid green on red or red on green. (Think especially about avoiding using red and green for “bad” and “good” indicators).
Alt text is a piece of descriptive text that accompanies images on a web page. This content is part of the image's metadata and enables users to access the information an image contains via alternate methods such as screen readers.
Alt text is also widely used by search engines (think Google Image Search), so writing thoughtful descriptions will not only help accessibility, but it will also drive traffic to your site.
Since the alt text is potentially going to be read aloud by a screen reader, be as succinct as possible and avoid numbers or symbols.
How and when to use alt text?
Functional images perform an action, such as opening a link. They should have alternative text that describes the action that's triggered when a user clicks that link.
Informative images convey simple information or concepts that can usually be expressed in a short phrase. Sometimes, an image is used more to convey a feeling or concept.
Complex images, such as graphs and diagrams, need to have alternative text that accurately conveys the data or information they contain. In this case, it's best to provide a full-text alternative to the data contained in the graph.
The most frequently encountered issues associated with web forms are incorrect use of labels, fieldsets, and legends
Form labels are textual indicators that should be bound to relevant form fields. These labels should identify the purpose of the field (what information is required) and should be provided for all form fields.
The label element should have a "for attribute" that is identical to the "id attribute" of the corresponding form field. This ensures that the label is bound to its form field. When forms and labels are bound to one another using this method, screen readers automatically announce label text when focus is moved to the corresponding form field.
<label for="first_name">Your First Name</label>
<input id="first_name" type="text" name="fname"/>
Fieldset tags are used as a mechanism for grouping related sections of forms. Correctly implemented <fieldset> tags provide a visual outline around the form field grouping.
The <legend> tag provides descriptions of the form groupings on the page. For any given <fieldset> there should always be one associated <legend> tag.
Assistive technologies such as screen readers provide varying degrees of functional support for <fieldset> tags and <legend> tags.
Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
Nest headings by their rank (or level): the most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
Skipping heading ranks can be confusing and should be avoided where possible: make sure that a <h2> is not followed directly by an <h4>, for example.